
<template>
    <div>
        <div style="display: flex;justify-content:space-around;">
            <el-card>
                <div ref="tu1" style="width: 600px;height: 400px; margin-top: 40px;"></div>
            </el-card>
            <el-card>
                <div style="width: 400px;height: 400px; margin-top: 40px;">
                    <h1 style="width: 100%;text-align: center;font-size: 30px;">审批功能</h1>
                        <RouterLink to="/home/application/ap1">
                            <el-badge class="item" :value="stateNum1" :hidden="state1" :offset="[0, 0]" type="">
                                <el-card class="mat"><h1>公告审批</h1></el-card>
                            </el-badge>
                        </RouterLink>
                        <RouterLink to="/home/application/weekend">
                            <el-badge class="item" :value="stateNum2" :hidden="state2" :offset="[0, 0] ">
                                <el-card class="mat"><h1>请假审批</h1></el-card>
                            </el-badge>
                        </RouterLink>
                        <RouterLink to="/home/application/po1">
                            <el-badge class="item" :value="stateNum3" :hidden="state3" :offset="[0, 0] ">
                                <el-card class="mat"><h1>采购审批</h1></el-card>
                            </el-badge>
                        </RouterLink>
                </div>
            </el-card>
        </div>
        <div>
            <el-card>
                <RouterView/>
            </el-card>
        </div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { selectNumByReview } from '@/api/puorder';
import { selectAnnouncementCountByState } from '@/api/announcemt';
import { selectWeekendCountByState } from '@/api/weekend';
import { selectAllByDepartment } from '@/api/user';
import { RouterView,RouterLink } from 'vue-router';
import { ref,onMounted,onBeforeMount } from 'vue';

const tu1=ref(null)
let mytu1={}
let option = {
    title: {
        text: '各部门人数分布',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
        name: '部门人数',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
        },
        label: {
            show: false,
            position: 'center'
        },
        emphasis: {
            label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
            }
        },
        labelLine: {
            show: false
        },
        data: []
        }
    ]
};
const stateNum1=ref(0)
const state1=ref(true)
const stateNum2=ref(0)
const state2=ref(true)
const stateNum3=ref(0)
const state3=ref(true)
const selectTu1= async ()=>{
    let list=[]
    const response=await selectAllByDepartment()
    const sfb=response.data.data
    sfb.forEach((element) => {
        list.push({ value: element.count, name: element.departmentName },)    
    });
    // console.log(list);
    //数据导入
    option.series[0].data=list
    if (mytu1) {
        mytu1.setOption(option);
    }
    //获取未审批数
    let rse={}
    rse=await selectAnnouncementCountByState(2);
    if(rse.data.data!=""){
        stateNum1.value=rse.data.data[0].count
        state1.value=false
    }else{
        state1.value=true
    }
    rse=await selectWeekendCountByState(1);
    if(rse.data.data!=""){
        stateNum2.value=rse.data.data[1]
        state2.value=false
    }else{
        state2.value=true
    }
    rse=await selectNumByReview();
    console.log("rse：");
    console.log(rse); 
    if(rse.data.data!=""){
        stateNum3.value=rse.data.data[0].count
        state3.value=false
    }else{
        state3.value=true
    }
}
// selectAllByDepartment
onMounted(()=>{
    // 初始化图表
    selectTu1()
    //图
    mytu1=echarts.init(tu1.value)
    mytu1.setOption(option);
    // 添加窗口大小变化监听
    window.addEventListener('resize', () => {        
        mytu1.resize();
    });
})
onBeforeMount(()=>{
    // window.removeEventListener('resize', () => {
    //     tu1.resize();
    // });
    // if (mytu1) {
    //     mytu1.dispose();
    // }
})
</script>

<style lang="scss" scoped>
    // sup{
    //     width: 30px !important; /* 调整圆点的宽度 */
    //     height: 30px !important; /* 调整圆点的高度 */
    //     font-size: 15px !important; /* 调整数字的字体大小 */
    //     border-radius: 50% !important; /* 保持圆点的圆形 */
    //     padding: 0 !important; /* 移除内边距 */
    // }
    .item {
        width: 90%;
        margin-top: 10px;
        margin-left: 10px;
        margin-right: 30px;
    }
    a{
        color: black ;
        text-decoration:none ;
    }
    .mat{
        // margin: 10px 30px;
        display: flex;
        justify-content: center;
    }
    .mat:hover{
        background-color: rgb(159, 210, 255);
        color: white;
    }
</style>